<template>
    <div>
        <!-- 组合拆分的组件 -->
        <!-- 第二步：调用引入的组件名称 -->
        <!-- 父组件ComView给子组件HeadCom传递数据，
            通过在子组件标签上使用自定义属性传递数据 -->
            <!-- 如果要传递数字、布尔值、响应式数据需要通过v-bind绑定自定义属性传递 -->
            <!-- 如果想传递驼峰命名的属性，可以用小写字母然后用-连接的语法或者直接使用驼峰-->
            <!-- 父组件接受子组件传递的数据，通过v-on绑定子组件映射过来的方法名称进行接受 -->
        <HeaderCom msg="父组件ComView的数据" :count="1" :list-data="comData" @toComData2="fromHeaderData"/>
        <!-- <ContentCom /> -->
        <content-com></content-com>
        <FooterCom />
        <FooterCom />
        <FooterCom />
    </div>
</template>

<script setup lang="ts">
//第一步 引入组件的名称及路径
import HeaderCom from '@/components/HeaderCom.vue';
import ContentCom from '@/components/ContentCom.vue';
//import FooterCom from '@/components/FooterCom.vue';

import { ref } from 'vue';
const comData = ref<Array<string>>(["香蕉","火龙果","菠萝"])

    //接受的函数方法默认的参数就是子组件传递过来的数据
    function fromHeaderData(value:string){
        console.log("子组件的数据：",value);
        
    }

</script>

<style lang="less" scoped>

</style>